iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

React Native & Redux 初步探討系列 第 5

Day 05 React Native 的起點

  • 分享至 

  • xImage
  •  

今天是第五天,前面講了如何建立專案,也說了如何用模擬器開啟專案 APP

今天我們來說說有關 react 的部份,並試著改動專案吧

先啟動模擬器來看看初始畫面吧

我這邊使用的是 iphone ,所以執行:

react-native run-ios
https://ithelp.ithome.com.tw/upload/images/20210920/20112878W0YoExz8sE.png

如圖所示,左邊是模擬器,以及專案的初始畫面,右邊是 Metro server 的監控,

如畫面上有兩個指令

  • r
    立刻重新整理專案
  • d
    打開選單
    https://ithelp.ithome.com.tw/upload/images/20210920/201128782a7mp1ZWbr.png

PS. 那我們在專案得修改,都會即時的呈現到模擬器的畫面上

程式的開始總會有個起點,讓我們來談談 react native程式進入點

index.js

AppRegistry.registerComponent(appName, () => App);

AppRegistry 是我們在整個 React Native 的進入點,
那我們的 root component 需要先用 AppRegistry.registerComponent 來註冊到 native 程式

registerComponent 的參數有:

  • appKey:string
    溝通 native 程式用的,為專案名
  • componentProvider
    root component 的提供方,function 需回傳 react component

那當運行成功,我們的之後就會在 App component 底下做開發啦


上一篇
Day 04 專案結構
下一篇
Day 06 Hello World
系列文
React Native & Redux 初步探討33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言